/* eslint-disable vue/no-side-effects-in-computed-properties */
<template>
  <div style="padding: 50px 0;text-align: center;">
    <div class="box" v-if="token === 123 || token === 456">
      <div class="row" v-for="(item,row) in checkerboard" :key="row">
        <div v-for="(item2,line) in item" :key="line+99999" class="item">
          <div>{{ 'x:' + row }}</div>
          <div>{{ 'y:' + line }}</div>
        </div>
      </div>
    </div>
    <div class="box" v-if="token === 123 || token === 456" style="top: 27.5px;left: 17.5px;">
      <div class="row" v-for="(item,row) in dataList" :key="row" style="height:55px;">
        <div
          v-for="(item2,line) in item"
          :key="line+99999"
          :class="{item2:true,black:item2 === 1,white:item2 === 2}"
          @click="changeArr(row,line,item2)"
        ></div>
      </div>
    </div>
    <input
      v-if="token !== 123 && token !== 456"
      v-model.number="token"
      type="text"
      placeholder="秘钥"
      style="display:block;margin-left:40px;"
    />
    <div v-if="token === 123 || token === 456" style="position:fixed;top:0;left:40px;">
      <div>
        你是{{ token === 456 ? '黑':'白' }}子
        <button @click="del">delet</button> 黑子先行(每次都是,别问为什么)
      </div>
      <h3 v-if="winValue == 2 ||  winValue == 1">
        <span v-if="winValue == 1">黑</span>
        <span v-if="winValue == 2">白</span>
        <span>子:获胜</span>
      </h3>
      <h3 v-else>
        <span v-if="isBlackChess === myChessIsBlack">
          <!-- {{ myChessIsBlack ? '执黑子':'执白子' }} -->
          轮到你了
        </span>
        <span v-else>
          <!-- {{ !myChessIsBlack ? '执黑子':'执白子' }} -->
          对方思考中
        </span>
      </h3>
    </div>
  </div>
</template>

<script>
// import data2 from './data.json'
export default {
  name: "App",
  data() {
    return {
      token: undefined,
      checkerboard: [
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      ],
      dataList: [
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
      ],
      onself: true,
      myChessIsBlack: undefined,
      winValue: undefined,
      isBlackChess:undefined
    };
  },
  watch: {
    token(newV) {
      // console.log(newV);
      if (newV === 123) {
        this.myChessIsBlack = false;
      }
      if (newV === 456) {
        this.myChessIsBlack = true;
      }
    },
  },
  created() {
    // console.log(!!localStorage.getItem("data"));
    if (localStorage.getItem("data")) {
      this.dataList = JSON.parse(localStorage.getItem("data"));
    }
  },
  methods: {
    changeArr(row, line, item2) {
      var value;
      if (item2 === 0) {
        if (this.onself) {
          //轮到自己了
          this.onself = !this.onself;
          //改变是否轮到自己的状态

          if (this.myChessIsBlack) {
            //如果是黑子则 value = 1
            value = 1;
          } else {
            //否则等于 value = 2
            value = 2;
          }
          //把当前棋盘的状态存到data中
          // this.$set(this.dataList[row], line, value);
          // 发送post请求  携带row line 和 value
          this.setData(row, line, value);
        }
      }
    },

    //网络请求
    getData() {
      const that = this;
      this.$axios.get("/api").then((res) => {
        this.winValue = res.data.winValue || undefined;
        this.dataList = JSON.parse(res.data.list);
        this.isBlackChess = res.data.isBlackChess
        if (res.data.isBlackChess === this.myChessIsBlack) {
          that.onself = true;
        } else {
          that.onself = false;
        }
      });
    },
    setData(row, line, value) {
      let data = {
        row,
        line,
        value,
        isBlackChess: this.myChessIsBlack,
      };
      this.$axios.post("/api/setData", data);
    },
    del() {
      this.$axios.get("/api/del");
    },
  },
  mounted() {
    setInterval(() => {
      if (this.token == 123 || this.token == 456) {
        this.getData();
      }
    }, 200);
    // this.setData(2, 3);
  },
};
</script>
<style lang="scss" scoped="scoped">
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.tran {
  transition: transform 0.5s;
  // margin-top: -400px;
}
#head {
  width: 200px;
  height: 200px;
  position: absolute;
  top: calc(50% - 100px);
  left: calc(50% - 100px);
}

#fuzzy {
  width: 210px;
  height: 210px;
  position: absolute;
  top: calc(50% - 105px);
  left: calc(50% - 105px);
  box-shadow: 0 0 20px 8px rgb(249, 249, 249) inset;
}

.btns {
  width: 180px;
  // overflow: auto;
  position: fixed;
  top: 0px;
  right: 5px;

  button {
    width: 180px;
    margin-top: 20px;
    padding: 2px 4px;
  }
}

.qrCode {
  position: absolute;
  left: calc(50% - 557px);
  top: 1px;
  // width: 1114px;
  height: 1110px;
  margin-left: 2px !important;
  z-index: -1;
}

#box2 {
  position: relative;
  display: block;
  width: 1110px;
  height: 1110px;
  padding: 0px;
  overflow: hidden;
}

// .box {
// //   width: 1110px;
// //   height: 1110px;
// }

.item,
.item2 {
  width: 55px;
  height: 55px;
  border-style: solid;
  text-align: center;
  line-height: 15px;
  overflow: hidden;
  box-sizing: border-box;
  border-width: 0.5px;
  div {
    // height: 12.75px;
    font-size: 16px;
    line-height: 27.5px;
    opacity: 0.5;
  }
}
.item2 {
  border-radius: 50%;
  width: 45px;
  height: 45px;
  margin-right: 10px;
  background: greenyellow;
  left: 67.5px;
  opacity: 0;
}
.black {
  opacity: 1;
  background: black;
}
.white {
  opacity: 1;
  background: white;
}
.row {
  overflow: hidden;
  display: flex;
}

.box {
  position: absolute;
  left: 40px;
}
</style>
